<template>
  <div class="headerForm">
    <div class="repeatCon" v-for="(item,index) in formDataList" :key="item.elementidInt">
      <div class="leftItem">
        {{ item.name }}
        <span
          style="color:red;float: right;margin-right: -5px"
        >{{item.requisite?'*':''}}</span>
      </div>
      <div class="rightItem">
        <el-date-picker
          v-if="item.fieldOptions ==='date'"
          size="small"
          v-model="item.value"
          :key="item.id"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <el-input
          v-else-if="item.fieldOptions !=='date' && item.inputType !=='select'"
          type="text"
         @input="valueChange(item.fieldOptions,index)"
          :key="item.id"
          v-model="item.value"
          :placeholder="item.name"
          size="small"></el-input>
          <el-select v-else-if="item.inputType ==='select'" size="small" v-model="item.value" style="width:140px;margin-right:15px;">
            <el-option v-for="data in item.inputDataList" :key="data.key" :label="data.label" :value="data.label"></el-option>
          </el-select>          
      </div>
    </div>
    <div class="button">
      <el-button style="float:right" type="primary" @click="addData" size="small" v-if="formDataList.length>0">确认</el-button>
      <!-- <el-button style="float:right" class="closeBtn" type="" @click="back" size="small">关闭</el-button> -->
    </div>
  </div>
</template>

<script>
import { deepCopy } from '@/utils/util';
export default {
    name: 'formGroup',
    props: {
        formList: Array,
    },
    data() {
        return {
            multipleSelection: [], //多选的数据
            headerForm: {
                name: '',
                amount: '',
                date: '',
                email: '',
            },
            formDataList: [],
        };
    },
    created() {
        this.handler(this.formList);
    },
    computed: {},
    watch: {},
    methods: {
        addData() {
            var data = {};
            var arr = this.formDataList;
            // 第一次遍历判断数据格式是否正确
            for (var i = 0, j = arr.length; i < j; i++) {
                let item = arr[i];
                // 必填项   514代表必填
                if (item.requisite && item.value === '') {
                    this.$message.warning('请输入必填项');
                    return;
                }
            }
            // 遍历获取数据，并清空表单控件
            arr.forEach(item => {
                data['eq_' + item.id] = item.value;
                item.value = '';
            });
            console.log(data,arr);
            this.$emit('addData', data);
        },
        valueChange(type,index){
            let val= this.formDataList[index].value.replace(/\s/g,'');
            if(type==='number'){
                this.formDataList[index].value=isNaN(val)?'':val;
            }else {
                this.formDataList[index].value=val.replace(/\s/g,'')
            }
        },
        handler(data) {
            let arr = deepCopy(data);
            arr.forEach(item => {
                item.value = '';
            });
            this.formDataList = arr;
            console.info(this.formDataList);
        }
    },
};
</script>

<style lang="scss">
.headerForm {
    background: #fff;
    padding: 10px 25px;
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
    & > div {
        margin: 10px 0;
        display: flex;
        align-items: center;
        min-width: 160px;
        justify-content: center;
        & > div {
            padding: 0 15px 0 0;
        }
    }
    .repeatCon {
        width: 250px;
    }
    .leftItem {
        width: 10em;
        text-align: justify;
        margin: -10px 0;
        word-break: break-all;
    }
    .leftItem:before {
        content: '';
        display: inline-block;
        width: 100%;
    }
    .leftItem:after {
        content: '';
        display: inline-block;
        width: 100%;
    }
    .rightItem {
        width: 100%;
        & > div {
            width: 100% !important;
        }
    }
    .closeBtn{
          display: none;
        }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        width: auto;
    }
    .el-input__prefix {
        left: 10px;
    }
    .el-input__inner {
        padding: 0 1px 0 15px;
    }
    .el-input--prefix .el-input__inner {
        padding-left: 30px;
    }
}

@media screen and (max-width: 560px) {
    .headerForm {
        padding: 0;
        & > div {
            width: 100%;
            justify-content: start;
        }
        .closeBtn{
          display: block;
        }
        button {
            width: 100%;
            margin-right: 10px;
        }
        .repeatCon {
            width: 100%;
            .leftItem {
                padding: 0 10px;
                width: 10em;
                text-align: justify;
                margin: -10px 0;
            }
        }
    }
}
</style>
